.index-container {
		background-color: #FDFDFD;

		.banner {
			width: 710rpx;
			height: 250rpx;
			margin-left: 20rpx;
			margin-bottom: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.repair-box {
			margin-bottom: 20rpx;
			width: 710rpx;
			height: 156rpx;
			margin-left: 20rpx;
			padding-left: 54rpx;
			display: flex;
			box-shadow: 0px 2px 12rpx 0px #EFEFEF;
			border-radius: 4rpx;

			.img {
				margin: 23rpx 0 0 12rpx;
				width: 178rpx;
				height: 108rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.go-repair {
				color: #fff;
				margin: 62rpx 20rpx 0 50rpx;
				font-size: 24rpx;
				line-height: 42rpx;
				text-align: center;
				width: 136rpx;
				height: 42rpx;
				background: linear-gradient(90deg, #30C1EB 0%, #3697F1 100%);
				border-radius: 21rpx;
			}

			.left-item {
				margin-top: 36rpx;

				.top {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.bottom {
					font-size: 28rpx;
					color: #999999;
				}
			}
		}

		.nav-box {
			display: flex;

			.nav-box-item {
				margin-left: 20rpx;
				width: 344rpx;
				height: 124rpx;
				background: #FFFFFF;
				box-shadow: 0px 2rpx 12rpx 0px #EFEFEF;
				border-radius: 8rpx;
				display: flex;
				align-items: center;

				.nav-icon {
					margin-left: 16rpx;
					width: 60rpx;
					height: 60rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.nav-desc {
					.desc-top {
						font-size: 28rpx;
					}

					.desc-bottom {
						font-size: 26rpx;
						color: #999;
					}
				}
			}
		}

		.rectify-task {
			height: 86rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 38rpx 0 18rpx;

			.more {
				color: #999;
				font-size: 28rpx;
				position: relative;

				&:after {
					content: '';
					position: absolute;
					top: 12rpx;
					right: -16rpx;
					width: 16rpx;
					height: 16rpx;
					border-top: 2rpx solid #999;
					border-right: 2rpx solid #999;
					transform: rotate(45deg);
				}
			}
		}

		.business {
			.new {
				color: #fff;
				position: absolute;
				top: 37rpx;
				right: 80rpx;
			}

			position: relative;
			width: 750rpx;
			height: 260rpx;

			image {
				width: 100%;
				height: 100%;
			}

			.task {
				position: absolute;
				color: #fff;
				font-size: 34rpx;
				top: 37rpx;
				left: 59rpx;
			}

			.top-icon {
				position: absolute;
				top: 37rpx;
				right: 21rpx;
				width: 42rpx;
				height: 46rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.task-num {
				height: 100rpx;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 40rpx;
				display: flex;

				// background-color: pink;
				.num-item {
					flex: 1;

					// padding-left: 80rpx;
					view {
						display: flex;
						justify-content: center;
						font-size: 28rpx;
						color: #fff;
					}

					.num-left {
						color: #F2FF63;
						font-size: 42rpx;
					}

					.num-center {
						color: #32C836;
						font-size: 42rpx;
					}

					.num-right {
						color: #FCC25E;
						font-size: 42rpx;
					}
				}
			}
		}

		.nav {
			width: 750rpx;
			height: 140rpx;
			// background-color: pink;
			display: flex;

			.nav-item {
				width: 20%;
				text-align: center;

				.item-img {

					width: 80rpx;
					height: 80rpx;
					margin: 20rpx 40rpx 0 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				text {
					color: #333;
					font-size: 28rpx;
				}
			}
		}

		.check-task {
			height: 86rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 38rpx 0 18rpx;

			.more {
				color: #999;
				font-size: 28rpx;
				position: relative;

				&:after {
					content: '';
					position: absolute;
					top: 12rpx;
					right: -16rpx;
					width: 16rpx;
					height: 16rpx;
					border-top: 2rpx solid #999;
					border-right: 2rpx solid #999;
					transform: rotate(45deg);
				}
			}
		}
	}